<template>
    <q-page class="cc-member row">
      <div class="col bg-white shadow-2 q-pa-md q-ma-sm">
        <q-table
          color="primary" class="cross_table" separator="cell" :columns="columns" :data="list" row-key="id"
          :pagination.sync="pagination" :visible-columns="group" @request="query" :rows-per-page-options="[10,20,50,100]">
          <template v-slot:top="table">
            <div class="row no-wrap full-width">
              <!--<div class="q-pa-md">
                <q-select v-model="membertype" :options="options2" @input="onValueChange" />
              </div>-->
              <q-input clearable outlined dense placeholder="请输入用户ID" @input="query" class="on-left" debounce="500" v-model="uid" >
                <template #append>
                  <q-btn flat round icon="search" color="primary" @click="query" :loading="loading">
                    <q-tooltip>搜索</q-tooltip>
                  </q-btn>
                </template>
              </q-input>
              <q-input clearable outlined dense placeholder="请输入用户姓名" @input="query" class="on-left" debounce="500" v-model="username" >
                <template #append>
                  <q-btn flat round icon="search" color="primary" @click="query" :loading="loading">
                    <q-tooltip>搜索</q-tooltip>
                  </q-btn>
                </template>
              </q-input>
              <q-space />
              <div class="q-gutter-xs">
                <q-btn icon="mdi-restore" no-wrap color="primary" label="刷新" @click="refresh" />
              </div>
            </div>
          </template>
          <template #body-cell-type="props">
            <q-td key="type" :props="props" >
              <div style="margin: 0 auto;" v-if="props.row.type==1">推广奖励</div>
              <div style="margin: 0 auto;" v-if="props.row.type==2">特殊贡献</div>
              <div style="margin: 0 auto;" v-if="props.row.type==5">系统红包</div>
            </q-td>
          </template>
          <template #body-cell-opt="props">
            <q-td :props="props" :auto-width="true">
              <q-btn flat round dense color="primary" icon="edit" @click="edit(props.row)">
                <q-tooltip>编辑</q-tooltip>
              </q-btn>
              <btn-del label="管理员管理" @confirm="del(props.row)" />
            </q-td>
          </template>
        </q-table>
      </div>
    </q-page>
  </template>
  <!--   查看用户的通证流水明细列表  ------------------------------ -->
  <script>
  import { IndexMixin } from 'boot/mixins';
  import confirm from 'components/confirm';
  import { requiredTest } from 'boot/inputTest';
  import { date } from 'quasar';
  const today = new Date()
  const { addToDate, subtractFromDate } = date
  export default {
    name: 'memberList',
    mixins: [IndexMixin],
    components: {
      confirm,
    },
    props:['status'],
    data() {
      return {
        columns: [
          // { name: 'id', align: 'center', label: '序号', field: 'id'},
          // {name: 'adminId', align: 'left', label: '管理员号', field: 'adminId'},
          {name: 'userId', align: 'center', label: '用户ID', field: 'userId'},
          {name: 'true_name', align: 'center', label: '用户姓名', field: 'true_name'},
          {name: 'type', align: 'center', label: '类型', field: 'type'},
          // {name: 'event', align: 'center', label: '操作类型', field: 'event'},
          // {name: 'sourceId', align: 'right', label: '源ID号', field: 'sourceId'},
          {name: 'amount', align: 'center', label: '当前金额', field: 'amount'},
          { name: 'time', align: 'center', label: '获得时间', field: 'time'},
          // { name: 'amountLog', align: 'center', label: '变化之前的金额', field: 'amountLog'},
          // { name: 'note', align: 'center', label: '备注', field: 'note'}
        ],
        loading: true,
        showQuery: true,
        headers: [{ name: 'Authorization', value: localStorage.Authorization }],
        uploadUrl: `${process.env.BASE_URL}/sys/common/upload`,
        imgUrl: `${process.env.BASE_URL}/sys/common/static`,
        url: {
          list: '/accountloglist',
        },
        form: {
          id : '',
          member_name : '',
          password : '',
          description : '',
          content : '',
          email : true,
          top : false,
          sort : 100,
        },
        file_list: [],
        isEdit: 0,
        membertype: null,
        options: {
          0: '未获得通证',
          3: '已获得通证'
        },
        options2: [],
        username: '',
        uid: '',
      };
    },
    methods: {
      requiredTest,
      addBefore() {
        this.form.catalogId = this.catalog;
        return true;
      },
      selectCatalog(n) {
        this.catalog = n;
        this.query();
      },
      getTypeLabel( v ){
        if (v == 1) {
          return "推广奖励"
        }else if (v == 2){
          return "特殊贡献"
        }else{
          return "其它"
        }
      },
      queryParam() {
        //组合查询参数
        if (!this.membertype) this.membertype = this.options[0];
        const value = Object.entries(this.options).find(([key, label]) => label === this.membertype)[0];
        const filter = {}
        if (this.username != '') {
          filter.username = this.username;
        }
        if (this.uid>0) {
          filter.uid = this.uid;
        }
        this.searchForm = filter;
      },
      initDict() {
         this.options2 = Object.values(this.options);
       },
      onSubmit (evt) {
        console.log( this.form  )
        if( this.isEdit ){
          //this.form.attachments = this.file_list
        }
        let url = ''
        if(this.isEdit == 1){
          url = this.url.edit
        }else{
          url = this.url.add
        }
        this.$axios.post(url, this.form).then((r) => {
          this.babyWord = r;
          if(r.code == 0){
            this.file_list = []
            this.$q.notify({ position: 'top', color: 'info', textColor: 'white', icon: 'cloud_done', group: false, html: true, message: '保存成功！！',});
            this.refresh()
            this.onReset()
            this.$refs.dialog.hide();
          }else{
            this.$q.notify({ position: 'top', color: 'info', textColor: 'white', icon: 'cloud_done', group: false, html: true, message: '保存成功！！'+ r.code,});

          }
        });
        //evt.target.submit()
      },
      onReset(){
        console.log('reset')
        this.form = {
          id : 0,
          member_name : '',
          password : '',
          email : true,
        }
      },
      refresh(){
        this.query();
        // this.$axios.post('/accountloglist', {page:1, limit:10}).then((r) => {
        //   this.list = r.data;
        // });
      },
      onValueChange(val) {
          this.membertype = val;
          this.query();
      }
    },

    mounted() {
      this.initDict();
    },
  };
  </script>

  <style lang="stylus"></style>
